<template>
  <div class="search">
    <!-- <input type="text" v-model='searchVal'>
    <span>取消 -- {{$store.state.a}} -- {{$store.getters.changeA}}</span> -->
    <van-search
      class='my-search'
      v-model="searchVal"
      show-action
      placeholder="请输入搜索关键词"
      @cancel="onCancel"
    />

    <div v-show="searchVal" class='search-content'>
      <ul>
        <!-- <li v-for='data in searchCinemaData' :key='data.cinemaId'>
          <h3>{{data.name}}</h3>
          <p>{{data.address}}</p>
        </li> -->
        <!-- <van-cell
          v-for='data in searchCinemaData'
          :key='data.cinemaId'
          :title="data.name"
          :value="'￥'+data.lowPrice/100"
          :label="data.address"
        /> -->

        <van-cell
          v-for='data in searchCinemaData'
          :key='data.cinemaId'
        >
          <!--使用title插槽来自定义标题-->
          <template v-slot:title>
            <h3>{{data.name}}</h3>
          </template>
          <template #label>
            <p>{{data.address}}</p>
          </template>
          <template #right-icon>
            <span>{{'￥'+data.lowPrice/100}}</span>
          </template>
        </van-cell>

      </ul>
      <div v-show='searchCinemaData.length === 0'>
        <img src="https://assets.maizuo.com/h5/v5/public/app/img/rectangle@2x.2bdf0374.png" alt="">
      </div>
    </div>
    <!--遍历5条数据-->
    <div v-show='!searchVal' class='search-content'>
      <ul>
        <li v-for='data in getCinemaFive(5)' :key='data.cinemaId'>{{data.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
import Vue from 'vue'
import { Search, Cell, Icon } from 'vant'

Vue.use(Search).use(Cell).use(Icon)
export default {
  data() {
    return {
      searchVal: ''
    }
  },
  computed: {
    ...mapGetters('cinema', ['getCinemaFive']),
    ...mapState('cinema', ['cinemaList']), // 要从cinema这个划分的module里面获取cinemaList状态
    searchCinemaData() {
      return this.cinemaList.filter(item => {
        return item.name.includes(this.searchVal) ||
               item.name.toUpperCase().includes(this.searchVal.toUpperCase()) ||
               item.address.includes(this.searchVal) ||
               item.address.toUpperCase().includes(this.searchVal.toUpperCase())
      })
    }
  },
  methods: {
    ...mapActions('cinema', ['getCinemaListAsync']),
    ...mapMutations('tabbar', ['hide', 'show']),
    onCancel() {
      this.$router.back()
    }
  },
  created() {
    if (this.cinemaList.length === 0) {
      this.getCinemaListAsync()
    }
    this.hide()
  },
  beforeDestroy() {
    // this.$store.commit('tabbar/show')
    this.show()
  }
}
</script>

<style lang='scss' scoped>
  .my-search{
    position: fixed;
    z-index: 10;
    width: 100%;
  }
  .search-content{
    padding-top:.6rem;
  }
</style>
